<template>
  <div id="perTreeMenu" class="tree_menu" :style="{...value.position}">
    <ul>
      <li @click="intOpen" v-if="value.options.indexOf('open') > -1"><i class="el-icon-tickets" ></i> 打开</li>
      <li @click="intEdit" v-if="value.options.indexOf('edit') > -1" v-dialog="editData" :data-type="value.directives.edit"><i class="el-icon-edit"></i> 编辑</li>
      <li @click="intDelete" v-if="value.options.indexOf('del') > -1"><i class="el-icon-delete"></i> 删除</li>
    </ul>
  </div>
</template>
<script type="text/javascript">
import { mapState, mapMutations, mapActions } from 'vuecx'
export default {
  props:{
    value:[Array,Object]
  },
  components: {
    //empty
  },
  data() {
    return {
      isDisplay:false,
      editData:null,
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  created(){
    // 获取数据
    this.getData();
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapActions(['setConfig','setResourcesAttr']),
    /**
     * 打开
     * @return {[type]} [description]
     */
    intOpen(){
        this.setConfig(this.editData.config);
        this.isDisplay = false;
    },

    /**
     * 编辑
     * @return {[type]} [description]
     */
    intEdit(){
      this.isDisplay = false;
    },

    /**
     * 删除
     * @return {[type]} [description]
     */
    intDelete(){
      var data = this.value.data;
      this.$confirm('此操作将永久删除该资源，不可恢复， 是否继续?', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        switch(this.value.type){
          case 'page':
            // 页面资源
            this.$cloud.post('build/page_del',{path:data.path,name:data.value}).then(response => {
              this.setResourcesAttr({key:'pages',value:response});
              this.getPageAll();
            })
          break;
          case 'component':
            // 组件资源
            this.$cloud.post('build/component_del',{name:data.value}).then(response => {
              this.setResourcesAttr({key:'components',value:response})
              this.getComponentAll();
            })
          break;
          case 'model':
            // 模型资源
            this.$cloud.post('build/delete',{name:data.value}).then(response => {
              this.setResourcesAttr({key:'models',value:response})
              this.getModelAll();
            })
          break;
        } 
      }).catch(() => {
        this.$message.info('已取消');   
      });
      this.isDisplay = false;
    },

    /**
     * 获取当前数据
     * @return {[type]} [description]
     */
    getData(){
      let data = this.value.data;
      let url = null;
      let param = {};
      switch(this.value.type){
        case 'page':
          url = 'build/page_one';
          param ={
            path:data.path,
            name:data.value
          }
        break;
        case 'component':
          url = 'build/component_one';
          param = {
            name:data.value
          }
        break;
        case 'model':
          url = 'build/first'
          param = {
            name:data.value
          }
        break;
      }

      this.$cloud.post(url,param).then(response => {
          this.editData = response
      })
    },




    /**
     * 获取所有页面文件
     * @return {[type]} [description]
     */
    getPageAll(){
      // 页面资源
      this.$cloud.get('build/page_all').then(response => {
        if(Array.isArray(response)){
          this.setResourcesAttr({key:'pages',value:response})
        }
      })
    },

    /**
     * 获取所有组件文件
     * @return {[type]} [description]
     */
    getComponentAll(){
      // 组件资源
      this.$cloud.get('build/component_all').then(response => {
        if(Array.isArray(response)){
          this.setResourcesAttr({key:'components',value:response})
        }
      })
    },

    /**
     * 获取所有模型文件
     * @return {[type]} [description]
     */
    getModelAll(){
      // 模型资源
      this.$cloud.get('build/model_all').then(response => {
        if(Array.isArray(response)){
          console.log('222',response);
          this.setResourcesAttr({key:'models',value:response})
        }
      })
    }
  }
}

</script>
<style type="text/css" lang="scss">
.disabled{
  background-color: rgba(99,99,99,0.1) !important;
  color:rgba(99,99,99,0.5) !important;
  cursor:default !important;
}
.tree_menu{
  position: fixed;
  display: block;
  z-index: 20000;
  background-color: #fff;
  padding:5px 0;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
  left:100px;
  top:200px;
  ul{
    margin:0;
    padding:0;
  }
  ul li{
    list-style: none;
    margin:0;
    padding:0 15px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
  }
  ul li:hover{
    background-color: #ebeef5
  }
}
</style>
